<template>
  <view class="postFee">
    <u-navbar
      :title="$t('discover.Services-for-a-fee')"
      :autoBack="false"
      @leftClick="leftClick(urlIndex)"
      bgColor="#F6F6F6"
      titleStyle="color: #000000"
      placeholder
    >
    </u-navbar>
    <view class="content-box" v-if="feeList && feeList.length > 0">
      <view
        class="item-box"
        v-for="item in feeList"
        :key="item.id"
        @click="navGoReword(item)"
      >
        <view class="top-box">
          <view class="box-money"
            >{{ getCoinName(item.currencyId) }}{{ item.remuneration }}</view
          >
          <view class="weizhi-view">
            <view class="iconfont icon-weizhi-1 weizhi"></view>
            <view class="center omit">{{ item.workPlaceNew }}</view>
          </view>
        </view>
        <view class="item-title omit">{{ item.title }}</view>
        <view class="btn-box">
          <view
            v-if="item.status == 1"
            class="btn green"
            @click="revokeItem(item)"
            >{{ $t("Revoke") }}</view
          >
          <view v-else class="btn gray" @click="editorItem(item)">{{
            $t("Edit")
          }}</view>
        </view>
      </view>
    </view>
    <u-empty
      v-else
      :text="$t('feeServices.EmptyDataList')"
      textColor="#878787"
      textSize="14"
      width="104"
      height="100"
      marginTop="80"
      icon="/static/image/bourse/none_order.png"
    ></u-empty>
  </view>
</template>

<script>
import { queryRewardList, queryRecruitment } from "@/services/feeServices.js";
import { getCurrencyList } from "@/services/bourse.js";
export default {
  data() {
    return {
      urlIndex: "postFee",
      language: "",
      searchForm: {
        pageSize: 20,
        pageNum: 1,
        userId:
          this.$store.state.userInfo.userId || uni.getStorageSync("userId"),
      },
      currencyList: [],
      feeList: [],
      total: 0,
    };
  },
  methods: {
    navGoReword(e) {
      uni.navigateTo({
        url: `/pagesDiscover/reward/RewardDetail?id=${e.id}`,
      });
    },
    async getCurrency() {
      const resp = await getCurrencyList();
      if (resp.result.code === 200) {
        this.currencyList = resp.result.data;
      }
    },
    getCoinName(currencyId) {
      const coinIndex = this.currencyList.findIndex(
        (value) => String(value.id) === String(currencyId)
      );
      return coinIndex !== -1 ? this.currencyList[coinIndex].symbol : "";
    },
    async getMainList() {
      uni.showLoading();
      const resp = await queryRewardList(this.searchForm);
      uni.hideLoading();
      uni.stopPullDownRefresh();
      if (resp.result.code === 200) {
        this.total = resp.result.total;
        this.feeList = resp.result.rows.map((item) => {
          return {
            ...item,
            workPlaceNew: item.workPlace
              ? this.getRegionNameList(JSON.parse(item.workPlace)).join(",")
              : null,
          };
        });
      }
    },
    revokeItem(item) {
      uni.showModal({
        title: this.$t("Revoke"),
        content: this.$t("feeServices.isRevoke"),
        cancelText: this.$t("cancel"), // 取消按钮的文字
        confirmText: this.$t("confirm"), // 确认按钮的文字
        showCancel: true, // 是否显示取消按钮，默认为 true
        success: (res) => {
          if (res.confirm) {
            this.toChangeFee(item);
          }
        },
      });
    },
    editorItem(item) {
      uni.navigateTo({
        url: "/pagesDiscover/reward/RewardRelease?id=" + item.id,
      });
    },
    async toChangeFee(obj) {
      const resp = await queryRecruitment({
        ...obj,
        status: 0,
      });
      if (resp.result.code === 200) {
        uni.showToast({
          icon: "none",
          title: this.$t("feeServices.revokeSuccess"),
        });
        setTimeout(() => {
          this.refresh();
        }, 1000);
      }
    },
    refresh() {
      this.feeList = [];
      this.total = 0;
      this.searchForm.pageNum = 1;
      this.getMainList();
    },
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.refresh();
  },
  onReachBottom() {
    if (this.total > this.searchForm.pageNum * this.searchForm.pageSize) {
      this.searchForm.pageNum++;
      this.getMainList();
    }
  },
  onShow() {
    this.refresh();
  },
  onLoad() {
    this.language = uni.getLocale();
    this.getPrePages(this.urlIndex); // 获取上一个页面的路径已经参数
    this.getCurrency();
  },
};
</script>

<style lang="scss" scoped>
.omit {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-all;
}

.postFee {
  width: 100%;
  padding: 30upx;
  box-sizing: border-box;

  .content-box {
    width: 100%;

    .item-box {
      width: 100%;
      height: fit-content;
      padding: 20upx;
      box-sizing: border-box;
      background: #ffffff;
      border-radius: 20upx;
      margin-top: 30upx;

      &:first-child {
        margin-top: 0upx;
      }

      .top-box {
        width: 100%;
        display: flex;
        align-items: center;

        .box-money {
          font-size: 32upx;
          font-family: HarmonyOS Sans-Medium, HarmonyOS Sans;
          font-weight: 500;
          color: #fe6600;
          line-height: 48upx;
          margin-right: 20upx;
        }

        .weizhi-view {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          .weizhi {
            color: #878787;
            font-size: 32upx;
          }

          .center {
            margin-left: 10upx;
            font-size: 24upx;
            font-weight: 400;
            color: #878787;
            font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
            line-height: 36upx;
          }
        }
      }

      .item-title {
        width: 100%;
        padding: 20upx 0upx;
        font-size: 32upx;
        font-family: HarmonyOS Sans-Medium, HarmonyOS Sans;
        font-weight: 500;
        color: #000000;
        line-height: 48upx;
        border-bottom: 2upx solid rgba(0, 0, 0, 0.05);
      }

      .btn-box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-top: 20upx;

        .btn {
          width: fit-content;
          height: 64upx;
          border-radius: 64upx;
          padding: 0upx 24upx;
          display: flex;
          justify-content: center;
          align-items: center;
          white-space: nowrap;
          font-size: 28upx;
          font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
          font-weight: 400;
          line-height: 40upx;
        }

        .green {
          color: #ffffff;
          background: #61bdb2;
        }

        .gray {
          border: 2upx solid rgba(135, 135, 135, 0.6);
          color: #878787;
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>
